<template>
  <view class="page-container">
    <!-- 头部及背景色 -->
    <backdrop />
    <navigation
      back
      backColor
      titleClick
      iconName="map"
      :title="title"
      :clickFunc="clickFunc"
      :isBack="false"
    />

    <view class="container">
      <!-- 搜索框 -->
      <search-view />

      <!-- banner -->
      <u-swiper
        indicator
        class="banner-swiper"
        indicatorMode="dot"
        :list="bannerLists"
        :loading="pageLoading"
        @click="clickBanner"
      />

      <!-- 菜单 -->
      <menu-view :list="menuList" :loading="pageLoading" />

      <!-- 推荐 -->
      <recommend :scrollToList="scrollToList" :changeTab="changeTab" />

      <!-- 底部列表 -->
      <page-list
        :refresh="listRefresh"
        :listLoad="listLoad"
        :status="listLoadStatus"
        :sticky="sticky"
        :changeTab="changeTab"
        :tabIndex="tabIndex"
      />
    </view>
  </view>
</template>

<script>
import searchView from "./components/searchView";
import menuView from "./components/menuView";
import recommend from "./components/recommend";
import pageList from "./components/pageList";
import { mapGetters } from "vuex";
import { getPageInfo } from "@/api/home";

export default {
  components: {
    searchView,
    menuView,
    recommend,
    pageList,
  },
  data() {
    return {
      bannerList: [],
      listLoad: false,
      listLoadStatus: "nomore",
      sticky: false,
      tabIndex: 0,
      pageLoading: false,
      menuList: [],
    };
  },
  computed: {
    ...mapGetters(["currentAddress", "loadLocation", "latitude", "longitude"]),
    title() {
      let str =
        this.loadLocation && !this.currentAddress
          ? "正在获取您的位置"
          : this.currentAddress?.streetCommunity || "无法获取您的位置";
      return str;
    },
    bannerLists() {
      return this.bannerList.map((item) => {
        return item.extra;
      });
    },
  },
  onPullDownRefresh() {
    this.listRefresh();
  },
  onPageScroll({ scrollTop }) {
    this.sticky = scrollTop >= 638;
  },
  onLoad() {
    this.getPageInfo();
  },
  methods: {
    clickBanner(index) {
      const current = this.bannerList[index];
      if (current.url) this.$navigateTo(current.url);
    },
    async getPageInfo() {
      this.pageLoading = true;
      const { data, code } = await getPageInfo();
      this.pageLoading = false;
      if (code == 200) {
        this.bannerList = data.bannerList;
        this.menuList = data.categoryList;
      }
    },
    changeTab(index) {
      this.tabIndex = index;
    },
    scrollToList() {
      uni.pageScrollTo({
        scrollTop: 638,
        duration: 0,
      });
    },
    listRefresh() {
      this.listLoad = true;
      this.listLoadStatus = "loading";
      setTimeout(() => {
        this.listLoad = false;
        uni.stopPullDownRefresh();
        this.listLoadStatus = "nomore";
      }, 1000);
    },
    clickFunc() {
      this.$checkLogin();
      uni.chooseLocation({
        latitude: this.currentAddress
          ? this.currentAddress.latitude
          : this.latitude,
        longitude: this.currentAddress
          ? this.currentAddress.longitude
          : this.longitude,
        success: ({ name, latitude, longitude }) => {
          this.$store.commit("SET_CURRENT_ADDRESS", {
            streetCommunity: name,
            latitude,
            longitude,
          });
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
  padding: 16px;
}

.banner-swiper {
  height: 128px;
  margin-top: 16px;
  border-radius: 8px;
}
</style>